<template>
  <div v-loading="loading" class="clearfix">
    <el-row>
      <el-col :span="16">
        <el-form
          ref="item"
          :model="item"
          :rules="rules"
          label-width="100px"
          :class="$style.assignWidth"
        >
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="头像：">
                <uploadImg
                  remark="会员头像"
                  :list="photoList"
                  :type-code="dics == {} ? dics.IMAGE_HEAD.dicCode :''"
                  @changeadvert="changeadvert"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="昵称：" prop="nickName">
                <el-input v-model="item.nickName" placeholder="请输入昵称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="真实姓名：" prop="fullName">
                <el-input v-model="item.fullName" placeholder="请输入真实姓名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="账号类型：" prop="type">
                <el-select v-model="item.type" :disabled="item.type===0" placeholder="请选择账号类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号：" prop="idNumber">
                <el-input v-model="item.idNumber" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="会员分类：" prop="grouping">
                <el-select v-if="dics.MEMBER_LEVEL" v-model="item.grouping" placeholder="请选择会员分类">
                  <el-option
                    v-for="item in dics.MEMBER_LEVEL.children"
                    :key="item.dicCode"
                    :label="item.dicName"
                    :value="item.dicCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码：" prop="phone">
                <el-input v-model="item.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="职务：">
                <el-input v-model="item.job" placeholder="请输入职务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公司：" prop="company">
                <el-input v-model="item.company" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="邮箱：" prop="email">
                <el-input v-model="item.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生日：">
                <el-date-picker
                  v-model="item.birthday"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择生日"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="性别：">
                <el-radio v-model="item.sex" label="0">男</el-radio>
                <el-radio v-model="item.sex" label="1">女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!isCreate" style="width:1030px;">
            <el-form-item label="是否员工：">
              <el-select v-model="item.employeeTag" placeholder="是否员工">
                <el-option
                  v-for="item in employeeTagArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="24">
              <el-form-item label="客户所在地：">
                <el-select
                  v-model="item.province"
                  :class="$style.select"
                  placeholder="请选择"
                  @change="changeProCode"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
                <el-select
                  v-model="item.city"
                  :class="$style.select"
                  placeholder="请选择"
                  @change="changeProCode"
                >
                  <el-option
                    v-for="item in citys"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
                <el-select v-model="item.county" :class="$style.select" placeholder="请选择">
                  <el-option
                    v-for="item in countys"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width:1000px;">
            <el-col :span="16">
              <el-form-item style="textAlign:center;marginTop:30px;">
                <el-button type="primary" @click="submit">保 存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const item = {
  headPortrait: "", // 头像
  nickName: "", // 昵称
  type: "", // 账号类型
  company: "", // 公司
  job: "", // 职务
  phone: "", // 手机
  email: "", // 邮箱
  fullName: "", // 真实姓名
  sex: "0", // 性别
  birthday: "", // 生日
  idNumber: "", // 身份证号
  province: "", // 省
  city: "", // 市
  county: "", // 区
  grouping: "",
  provinceName: "",
  cityName: "",
  countyName: ""
};
import uploadImg from "~/components/commom/uploadImg";
import mmUrl from "~/utils/utilUrl";
import regular from "~/utils/regular";
export default {
  components: {
    uploadImg
  },
  props: ["id"],
  data() {
    return {
      employeeTagArr: [
        {
          value: 1,
          label: "员工"
        },
        {
          value: 2,
          label: "俱乐部会员"
        }
      ],
      dataId: this.$props.id,
      isCreate: this.$props.id === "create",
      loading: true,
      photoList: [],
      item: JSON.parse(JSON.stringify(item)),
      provinceList: [],
      canChangeProCode: true,
      rules: {
        phone: regular.phone,
        idNumber: regular.identity,
        type: regular.requireChange,
        fullName: regular.require2,
        nickName: regular.require,
        company: regular.require2,
        email: regular.email1,
        grouping: regular.requireChange
      },
      provinceList: [],
      countyList: [],
      cityList: [],
      countys: [],
      citys: [],
      dics: [],
      options: [
        {
          value: 0,
          label: "投资人",
          disabled: true
        },
        {
          label: "投资顾问",
          value: 1
        },
        {
          label: "公司账户",
          value: 2
        },
        {
          label: "运营账户",
          value: 3
        }
      ]
    };
  },
  watch: {
    "item.province"(newd) {
      if (!this.canChangeProCode) {
        return false;
      }
      this.item.city = "";
      this.item.county = "";
      this.citys = this.cityList.filter(v => v.parentCode === newd);
      this.countys = [];
      let result = this.provinceList.filter(v => v.areaCode === newd);
      if (result.length) {
        this.item.provinceName = result[0].areaName;
      }
    },
    "item.city"(newd) {
      if (!this.canChangeProCode) {
        return false;
      }
      this.item.county = "";
      this.countys = this.countyList.filter(v => v.parentCode === newd);
      let result = this.citys.filter(v => v.areaCode === newd);
      if (result.length) {
        this.item.cityName = result[0].areaName;
      }
    },
    "item.county"(newd) {
      const result = this.countys.filter(v => v.areaCode === newd);
      if (result.length) {
        this.item.countyName = result[0].areaName;
      }
    }
  },
  mounted() {
    this.getInit();
  },
  methods: {
    changeProCode() {
      this.canChangeProCode = true;
    },
    changeadvert(res) {
      this.item.headPortrait = res.fileUrl;
    },
    getInit() {
      this.$post({
        url: this.isCreate ? mmUrl.member.loadCreate : mmUrl.member.loadEdit,
        data: {
          id: this.isCreate ? "" : this.dataId
        }
      }).then(res => {
        this.dics = res.dicsMap;
        this.provinceList = res.areas.provinces;
        this.countyList = res.areas.countys;
        this.cityList = res.areas.citys;
        this.loading = false;
        if (!this.isCreate) {
          this.canChangeProCode = false;
          this.item = res.item;
          this.photoList = [{ fileUrl: res.item.headPortrait }];
          this.citys = this.cityList.filter(
            v => res.item.province === v.parentCode
          );
          this.countys = this.countyList.filter(
            v => res.item.city === v.parentCode
          );
        }
      });
    },
    submit() {
      this.$refs["item"].validate(valid => {
        if (valid) {
          if(this.item.phone){
            this.item.phone.includes('*')? delete this.item.phone :''
          }
          const item = this.item;
          item.id = this.dataId;
          this.$post({
            url: this.isCreate ? mmUrl.member.create : mmUrl.member.edit,
            data: {
              item: this.isCreate ? this.item : item
            }
          })
            .then(() => {
              this.item = JSON.parse(JSON.stringify(item));
              this.$message({
                type: "success",
                message: "新增成功"
              });
              this.$emit("closeDialog");
            })
            .catch(() => {});
        }
      });
    }
  }
};
</script>

<style lang='scss' module>
.assignWidth {
  input {
    width: 180px;
  }
}
.select {
  margin-right: 5px;
}
</style>
